<template>
  <div class="child-index">
    child
    <!-- <p
      v-for="item in arr"
      :key="item.id"
      @click="choose(item.id)"
      :class="[item.judge === false ? 'color1' : 'color']"
    >
      {{ item.msg }}
    </p>
    {{ ids }} -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          id: 1,
          judge: false,
          msg: "a1",
        },
        {
          id: 2,
          judge: false,
          msg: "a2",
        },
        {
          id: 3,
          judge: false,
          msg: "a3",
        },
        {
          id: 4,
          judge: false,
          msg: "a4",
        },
      ],
    };
  },
  computed: {
    ids: function () {
      return this.arr.filter((res) => {
        return res.judge === true;
      });
    },
  },
  methods: {
    choose(id) {
      let arr = JSON.parse(JSON.stringify(this.arr));
      let index = arr.findIndex((res) => {
        return res.id === id;
      });
      arr[index].judge = !arr[index].judge;
      this.arr = arr;
    },
  },
};
</script>

<style lang="scss">
.child-index {
  .color {
    color: red;
  }
  .color1 {
    color: black;
  }
}
</style>
